<template>
  <x-sub-page :isFixBtn="true">
    <div class="purchase-order-detail" v-loading="pageLoading">
      <div class="form-components">
        <div class="panl-title">
          <span>基础信息</span>
        </div>
      </div>
      <el-descriptions
        direction="vertical"
        :column="4"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="采购单号">{{ dataForm.number | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{
          selectDictLabel(dictOptions['srm_purchase_order.state'], dataForm.state) | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item label="采购组织">{{ dataForm.purchaseOrg | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="采购组">{{ dataForm.purchaseTeam | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="订单类型">{{
          selectDictLabel(dictOptions['srm_purchase_order.order_type'], dataForm.orderType) | emptyVal
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        direction="vertical"
        :column="1"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="订单摘要"> {{ dataForm.remark | emptyVal }} </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        direction="vertical"
        :column="1"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="附件">
          <x-upload
            ref="fileUpload"
            :edit-flag="false"
            :limit="9"
            :fileSize="30"
            :span="6"
            :isFileRemark="false"
            :old-file-list="dataForm.purchaseOrderFileList"
            :tips="'最多上传9张，附件大小不超过30MB.'"
          >
          </x-upload>
        </el-descriptions-item>
      </el-descriptions>
      <div class="form-components">
        <div class="panl-title">
          <span>采购物料列表</span>
        </div>
      </div>
      <x-table
        ref="tableCom"
        :isPagination="false"
        :data-source="dataForm.srmPurchaseOrderDetailList"
        :row-key="'id'"
        :height="getTableHeight(dataForm.srmPurchaseOrderDetailList)"
      >
        <el-table-column
          v-for="(item, index) in columns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :min-width="item.minWidth || '-'"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <span v-if="item.prop === 'materialUnit'">
              {{ selectDictLabel(dictOptions['srm_material.material_unit'], scope.row[item.prop]) }}</span
            >
            <span v-else-if="item.prop === 'sourceType'">
              {{ selectDictLabel(dictOptions['srm_purchase_order_detail.source_type'], scope.row[item.prop]) }}</span
            >
            <span v-else-if="item.prop === 'deliveryDate'">{{ replaceDateTime(scope.row[item.prop]) }}</span>
            <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
          </template>
        </el-table-column>
      </x-table>
    </div>
    <fixed-btn-area>
      <el-button @click="handleBack"> {{ '返回' }} </el-button>
      <el-button
        v-if="dataForm.state === 1"
        v-hasPermi="['orderSynergy:purchase:confirm']"
        type="primary"
        @click="handleSubmit('confirm')"
        :loading="pageLoading"
      >
        {{ '确认' }}
      </el-button>
      <el-button
        v-if="dataForm.state === 1"
        v-hasPermi="['orderSynergy:purchase:refuse']"
        type="primary"
        @click="handleSubmit('refuse')"
        :loading="pageLoading"
      >
        {{ '拒绝' }}
      </el-button>
    </fixed-btn-area>
  </x-sub-page>
</template>

<script>
import { PermissionsMixin, QueryDictMixin, cloneDeep, selectDictLabel, replaceDateTime } from '@package/utils'
import {
  apiGetPurchaseOrderDetail,
  apiPutPurchaseOrderConfirm,
  apiPutPurchaseOrderRefuse
} from '@/modules/orderSynergy/api/purchaseOrder.js'
import { materialColumns } from '@/modules/orderSynergy/config/purchaseOrder.js'
import { EnumApiCode } from '../../../../../../globalEnum.js'

export default {
  name: 'ManagePricingDetail',
  mixins: [PermissionsMixin, QueryDictMixin],
  inject: ['closePages'],
  data() {
    return {
      pageLoading: false,
      columns: materialColumns,
      srmDictKeys: [
        'srm_purchase_order.order_type',
        'srm_purchase_order.state',
        'srm_material.material_unit',
        'srm_purchase_order_detail.source_type'
      ],
      dataForm: {
        number: '',
        state: '',
        purchaseOrg: '',
        purchaseTeam: '',
        orderType: '',
        srmPurchaseOrderDetailList: []
      }
    }
  },
  mounted() {
    const {
      query: { id }
    } = this.$route
    this.purchaseOrderId = id
    this.getInfo(id)
    this.initDictConfig()
  },
  methods: {
    selectDictLabel,
    replaceDateTime,
    getTableHeight(arr) {
      return (arr?.length || 1) * 42 + 80 || 200
    },
    // 获取详情
    async getInfo(id) {
      this.pageLoading = true
      const { data, code } = await apiGetPurchaseOrderDetail(id)
      this.pageLoading = false
      if (code === EnumApiCode.Success) {
        this.$nextTick(() => {
          this.dataForm = Object.assign(this.dataForm, cloneDeep(data))
          console.log('this.dataForm', this.dataForm)
        })
      }
    },
    handleSubmit(sign) {
      this.$confirm(`是否${sign === 'confirm' ? '确认' : '取消'}采购订单?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then((confirm) => {
          sign === 'confirm'
            ? this.handlePurchaseOrderConfirm(this.purchaseOrderId)
            : this.handlePurchaseOrderRefuse(this.purchaseOrderId)
        })
        .catch((cancel) => {})
    },
    // 确认
    async handlePurchaseOrderConfirm(id) {
      this.pageLoading = true
      const { code, msg } = await apiPutPurchaseOrderConfirm(id)
      this.pageLoading = false
      if (code === EnumApiCode.Success) {
        this.$message.success('确认成功')
        this.handleBack()
      } else {
        this.$message.error(msg)
      }
    },
    // 拒绝
    async handlePurchaseOrderRefuse(id) {
      this.pageLoading = true
      const { code, msg } = await apiPutPurchaseOrderRefuse(id)
      this.pageLoading = false
      if (code === EnumApiCode.Success) {
        this.$message.success('拒绝成功')
        this.handleBack()
      } else {
        this.$message.error(msg)
      }
    },
    handleBack() {
      this.$router.go(-1)
      this.closePages()
    }
  }
}
</script>

<style lang="scss" scoped>
.purchase-order-detail {
  padding: 0 20px;
  overflow: auto;
  .panl-title {
    height: 45px;
    // margin: 0 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ededed;
    margin-bottom: 16px;
    span {
      display: inline-block;
      height: 22px;
      line-height: 22px;
      color: #171c26;
      border-left: 2px solid #4474f6;
      padding-left: 12px;
      font-size: 16px;
      font-weight: 700;
    }
  }
  ::v-deep .title-style {
    color: #707683;
    font-size: 14px;
  }
  ::v-deep .content-style {
    padding-bottom: 20px;
    color: #333;
    font-size: 14px;
  }
  .table-title {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #707683;
    font-weight: normal;
  }
}
</style>
